/*
 * @Author: hongbin
 * @Date: 2022-12-23 21:08:55
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-24 15:41:50
 * @Description:话题列表
 */
import { FC, useEffect, useState } from "react";
import styled, { css } from "styled-components";
import { get } from "../src/api";
import SEOHeader from "../src/components/SEO";
import { EditTopic, ITopic } from "../src/components/Topic/List";
import { TopicDesc } from "./topic";

interface IProps {
    list: ITopic[];
}

/**
 * 服务端执行 获取用户配置
 */
export const getServerSideProps = async ({ query: { id } }: any) => {
    const { data } = await get("/Topic/queryAll");
    // console.log("hi", data);

    const props = {} as IProps;

    if (data) props.list = data;

    return {
        props,
    };
};

const Topics: FC<IProps> = ({ list }) => {
    const [topics, setTopics] = useState<ITopic[]>(list.reverse() || []);

    return (
        <Container>
            <SEOHeader title="话题列表" />
            <h1 style={{ color: "#fff" }}>话题列表</h1>
            <EditTopic
                show={true}
                onSend={(newTopic) => {
                    console.log(newTopic);
                    setTopics((ts) => [newTopic, ...ts]);
                }}
            />
            {topics.map((t) => (
                <TopicDesc onClick={() => window.open(`${location.origin}/topic?id=${t._id}`)} topic={t} key={t._id} />
            ))}
        </Container>
    );
};

export default Topics;

const Container = styled.div`
    background-color: #083d05;
    border-radius: 2vw;
    padding: 1vh 1vw;
    width: 80vw;
    margin: 2vh auto;
    & > div {
        transition: 0.3s;
        cursor: pointer;
        background: #17ae10;
        border-radius: 1vw;
        margin: 1vh 0;
        padding: 0.5vh;
        :hover {
            transform: translateY(-1px) scale(1.01);
            background: #2ccc1f;
        }
    }
`;
